<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>图片内容</el-breadcrumb-item>
    </el-breadcrumb>
    <blank />

    <el-row>
      <el-col :span="24">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ defaultMenu }}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in menus" :key="item.id" :index="item[1]" :command="index.toString()">{{ item[0] }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button @click="addimg()" class="add-image" type="text">增加图片</el-button>
      </el-col>
    </el-row>
    <blank />
    
    <span class="image-container" v-for="(item, index) in images" :key="item.id" :index="item.Id">
      <div class="image-area">
        <img :src="item.ImagePath" @click="preview(item.ImagePath)" />
      </div>
      <div>
        排序&nbsp;&nbsp;<el-input @blur="updateSort(index)" v-model="item.Sort" size="mini" class="position"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-checkbox v-model="item.Visiable" @change="changeVisiable(item.Id, item.Visiable)">可见</el-checkbox>&nbsp;&nbsp;&nbsp;&nbsp;
        <span @click="deleteImage(item.Id, index)" class="image-delete">删除</span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span @click="preview(item.ImagePath)" class="image-preview">看大图</span>
      </div>
    </span>

    <el-dialog title='大图预览' v-model="callDialog">
      <div class="preview-container">
        <img :src="previewSrc" v-if="previewSrc" class="preview-img" />
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import blank from '@/components/Blank'
import { Message, MessageBox } from 'element-ui'
import router from '@/router'
import ax, { errhandler } from '@/api/_axios-config'
import * as apis from '@/api/_api'

export default {
  name: 'dashboard',
  data () {
    return {
      menus: [
        ['首页轮播', '100'],
        ['首页菜单', '101'],
        ['首页其他', '102'],
        ['保障详情图', '1020'],
        ['日常保洁详情', '200'],
        ['开荒保洁详情', '300'],
        ['空调清洗详情', '400'],
        ['油烟机清洗详情', '500'],
        ['玻璃清洗详情', '600'],
        ['地毯清洗详情', '700'],
        ['包月服务详情', '800'],
        ['定制服务详情', '900'],
        ['展示详情用图', '1000']
      ],
      defaultMenu: '首页轮播',
      images: [],
      callDialog: false,
      previewSrc: '',
      visiable: false
    }
  },
  methods: {
    addimg () {
      router.replace('/image/addimg')
    },
    preview (src) {
      if (src) {
        this.callDialog = true
        this.previewSrc = src
      }
    },
    deleteImage (id, index) {
      MessageBox.confirm('确定删除该图片？', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        ax.delete(apis.DELETEIMAGE, { params: { id: id } }).then(
          response => {
            var result = response.data
            if (result.BoolStatus) {
              this.images.splice(index, 1)
              Message.success('删除成功')
            } else {
              Message.success('删除失败')
            }
          }
        ).catch(
          err => {
            errhandler(err)
          }
        )
      }).catch(() => {
        Message.info('取消删除操作')
      })
    },
    updateSort (index) {
      var img = this.images[index]

      ax.patch(apis.UPDATESORT, { id: img.Id, sort: img.Sort }).then(
        response => {
          var result = response.data
          if (result.BoolStatus) {
            Message.success('修改排序成功')
          } else {
            Message.error('修改排序失败')
          }
        }
      ).catch(
        err => {
          errhandler(err)
        }
      )
    },
    getImages (p) {
      ax.get(apis.IMAGESBYPOSITION, { params: { position: p } }).then(
        response => {
          var data = response.data
          if (data.BoolStatus && data.Data) {
            this.images = data.Data
          } else {
            this.$message('暂无数据')
          }
        }
      ).catch(
        err => {
          errhandler(err)
        }
      )
    },
    handleCommand (command) {
      this.images = []
      this.defaultMenu = this.menus[parseInt(command)][0]
      this.getImages(this.menus[parseInt(command)][1])
    },
    changeVisiable (id, visiable) {
      ax.patch(apis.VISIABLE_IMAGE, { visiable: visiable, id: id }).then(
        response => {
          let result = response.data
          if (result.BoolStatus) {
            Message.success('更新状态成功')
          } else {
            Message.error(result.Message)
          }
        }
      ).catch(
        err => {
          errhandler(err)
        }
      )
    }
  },
  components: { blank },
  created: function () {
    this.getImages(this.menus[0][1])
  }
}
</script>

<style lang="stylus">
.el-dropdown-link
  cursor pointer
  color #20a0ff

.image-container
  display block
  float left
  width 300px
  height 260px
  margin 0 10px 15px 0
  .image-area
    width 100%
    height 235px
    vertical-align bottom
    overflow hidden
    img
      width 100%
      cursor pointer
  div
    .position
      width 50px
      margin-bottom 5px
    .image-delete
      color red
      font-weight bold
      cursor pointer
    .image-preview
      color #1D8CE0
      font-weight bold
      cursor pointer

div.preview-container
  width 100%
  img.preview-img
    display block
    max-width 100%
    margin auto

.add-image
  font-weight bold
  color #13CE66
</style>
